<template>
  <div>
    <h1>hello world</h1>
    <el-button @click="changeFirstName">changeFirstName</el-button>
    <el-button @click="changeLastName">changeLastName</el-button>
    <el-button @click="changeTypeToA">changeTypeToA</el-button>
    <el-button @click="changeTypeToB">changeTypeToB</el-button>
    <el-button @click="changeTypeToC">changeTypeToC</el-button>
    <el-button @click="changeTypeD">changeTypeD</el-button>
    <h1>{{ fullName }}</h1>
    <h2>{{ nowDate }}</h2>
    <h2>{{ count }}</h2>
    <h1>{{ fullName.split('').reverse().join('') }}</h1>
    <h3 v-if="type === 'A'">
      is A
    </h3>
    <h3 v-else-if="type === 'B'">
      is B
    </h3>
    <h3 v-else-if="type === 'C'">
      is C
    </h3>
    <h3 v-else>
      Not A/B/C
    </h3>
  </div>
</template>
<script>
export default {
  name: 'ComputedTest',
  data() {
    return {
      firstName: 'Foo',
      lastName: 'Bar',
      type: 'A',
      count: 1
    }
  },
  computed: {
    fullName: function() {
      return this.firstName + ' ' + this.lastName
    },
    nowDate: function() {
      return Date.now()
    }
  },
  watch: {
    firstName: function(newValue, oldValue) {
      console.log('newValue:' + newValue + '  oldValue:' + oldValue)
    }
  },
  created() {
    setInterval(console.log('hello'), 1000)
  },
  methods: {
    changeFirstName() {
      this.firstName = this.firstName + 'f'
    },
    changeLastName() {
      this.lastName = this.lastName + 'l'
    },
    changeTypeToA() {
      this.type = 'A'
    },
    changeTypeToB() {
      this.type = 'B'
    },
    changeTypeToC() {
      this.type = 'C'
    },
    changeTypeD() {
      this.type = 'D'
    }
  }
}
</script>

<style scoped>

</style>
